<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<title>实名认证- 外咖APP任务发布平台</title>
<link rel="shortcut icon" href="/static/img/favicon.ico"
	type="image/x-icon" />
<link rel="stylesheet" href="/static/layui/css/layui.css" />
<link rel="stylesheet" href="/static/css/realNameAuth.css" />
</head>

<body>
	<form class="layui-form body-form">
		<div class="user_left" style="padding: 20px;">
			<fieldset class="layui-elem-field">
				<legend
					style="font-size: 30px;text-align: center;font-weight: bold;">实名认证</legend>
				<div class="layui-field-box">
					<div class="layui-form-item">
						<label class="layui-form-label">真实姓名：</label>
						<div class="layui-input-block">
							<!-- 如果已经认证则禁用 -->
							<input type="text" id="real-name" placeholder="请输入真实姓名"
								maxlength="10" lay-verify="required|username"
								class="layui-input">
						</div>
					</div>

					<div class="layui-form-item">
						<label>身份证号码：</label>
						<div class="layui-input-block">
							<!-- 如果已经认证则禁用 -->
							<input type="text" id="id-number" placeholder="请输入身份证号码"
								maxlength="18" lay-verify="required|identity"
								class="layui-input">
						</div>
					</div>

					<div class="layui-form-item">
						<label class="layui-form-label">用户类型：</label>
						<div class="layui-input-block">
							<input type="radio" name="user-type" id="personal-radio"
								lay-filter="user-type" value="0" title="个人" checked> <input
								type="radio" name="user-type" id="company-radio"
								lay-filter="user-type" value="1" title="企业">
						</div>
					</div>

					<div class="enterprise-info">
						<div class="layui-form-item">
							<label class="layui-form-label">公司名称：</label>
							<div class="layui-input-block">
								<!-- 如果已经认证则禁用 -->
								<input type="text" id="company-name" placeholder="请输入公司名称"
									maxlength="30" class="layui-input">
							</div>
						</div>
					</div>

					<div class="layui-form-item" id="auditStatus">
						<label class="layui-form-label">认证状态：</label>
						<div class="layui-input-block">
							<label class="layui-form-label layui-bg-black" id="auth-status"></label>
						</div>
					</div>

					<div id="auth_info">
						<div class="layui-form-item">
							<label>身份证正面照片：</label>
							<div class="layui-input-block">
								<img class="upload-img" id="idFrontImage" title="请上传身份证正面照片" />
								<button type="button" class="layui-btn layui-btn-primary"
									id="idFrontImg-upload">
									<i class="layui-icon">&#xe67c;</i> 上传图片
								</button>
							</div>
						</div>

						<div class="layui-form-item">
							<label>身份证反面照片：</label>
							<div class="layui-input-block">
								<img class="upload-img" id="idBackImage" title="请上传身份证反面照片" />
								<button type="button" class="layui-btn layui-btn-primary"
									id="idBackImg-upload">
									<i class="layui-icon">&#xe67c;</i> 上传图片
								</button>
							</div>
						</div>
						<div class="enterprise-info">

							<div class="layui-form-item">
								<label>营业执照照片：</label>
								<div class="layui-input-block">
									<img class="upload-img" id="attachmentImage"
										title="请上传营业执照正面照片" />
									<button type="button" class="layui-btn layui-btn-primary"
										id="attachmentImg-upload">
										<i class="layui-icon">&#xe67c;</i> 上传图片
									</button>
								</div>
							</div>
						</div>
						<div id="msg" class="layui-form-item" style="display: none;">
							<label class="layui-form-label">审核意见：</label>
							<div class="layui-input-block">
								<!-- 如果已经认证则禁用 -->
								<input type="text" name="msg" class="layui-input">
							</div>
						</div>
						<div>

							<div class="layui-form-item">
								<div class="layui-input-block">
									<button id="submitbtn" class="layui-btn" lay-submit
										lay-filter="saveAuth">立即提交</button>
									<!-- 										<button type="reset" class="layui-btn layui-btn-primary">重置</button> -->
								</div>
							</div>
						</div>
					</div>
				</div>
			</fieldset>
		</div>
	</form>

	<script type="text/javascript"
		src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
	<script type="text/javascript" src="/static/layui/layui.all.js"></script>
	<script type="text/javascript" src="/static/js/realNameAuth.js"></script>
	<script type="text/javascript">
		//隐藏企业信息
		$(function() {
			$(".enterprise-info").hide();
	
			var auditStatus = "${secuser.auditStatus}";
			if (auditStatus == "") {
				$("#auditStatus").hide();
			} else {
				//显示数据
				$("#real-name").val("${secuser.realName}");
				$("#id-number").val("${secuser.idCardNumber}");
				$("#msg input[name=msg]").attr("disabled","disabled");
				if (auditStatus == 0) {
					var name = "${secuser.realName}";
					$("#real-name").val(name.substring(0, 1)+"**");
					var identity = "${secuser.idCardNumber}";
					$("#id-number").val(identity.substring(0, 4)+"******"+identity.substring(identity.length-4, identity.length));
					
					//禁用input
					$("#real-name").attr("disabled","disabled");
					$("#id-number").attr("disabled","disabled");
					$("#company-name").attr("disabled","disabled");
					
					//显示审核状态
					$("#auditStatus #auth-status").text("待审核");
					//禁用提交按钮
					$("#submitbtn").attr("class", "layui-btn layui-btn-disabled");
					$("#submitbtn").attr("disabled", "disabled");
	
					//禁用上传按钮
					$("#idFrontImg-upload").attr("class", "layui-btn layui-btn-primary layui-disabled");
					$("#idFrontImg-upload").attr("disabled", "disabled");
					$("#idBackImg-upload").attr("class", "layui-btn layui-btn-primary layui-disabled");
					$("#idBackImg-upload").attr("disabled", "disabled");
					//禁用上传按钮
					$("#attachmentImg-upload").attr("class", "layui-btn layui-btn-primary layui-disabled");
					$("#attachmentImg-upload").attr("disabled", "disabled");
	
					//判断是认证企业还是个人
					if ("${secuser.attachmentUrl}" != "") {
						var corporate = "${secuser.corporateName}";
						//显示数据
						$("#company-name").val(corporate.substring(0, 1)+"****");

						$("#attachmentImage").prop("src", "${secuser.attachmentUrl}");
					} else {
						//显示数据
						$("#idFrontImage").prop("src", "${secuser.idCardFrontImgUrl}");
						$("#idBackImage").prop("src", "${secuser.idCardBackImgUrl}");
					}
				} else if (auditStatus == 1) {
					$("#auditStatus #auth-status").text("审核失败");
					$("#msg").show();
					$("#msg input[name=msg]").val("${secuser.auditResult}");
					$("#msg input[name=msg]").css("color", "red");
					//启用提交按钮
					$("#submitbtn").attr("class", "layui-btn");
					$("#submitbtn").removeAttr("disabled");
					//启用上传按钮
					$("#idFrontImg-upload").attr("class", "layui-btn layui-btn-primary");
					$("#idFrontImg-upload").removeAttr("disabled");
					//启用上传按钮
					$("#idFrontImg-upload").attr("class", "layui-btn layui-btn-primary");
					$("#idFrontImg-upload").removeAttr("disabled");
					$("#idBackImg-upload").attr("class", "layui-btn layui-btn-primary");
					$("#idBackImg-upload").removeAttr("disabled");
					//判断是认证企业还是个人
					if ("${secuser.AttachmentUrl}" != "") {
						//显示数据
						$("#company-name").val("${secuser.corporateName}");
						$("#attachmentImage").prop("src", "${secuser.attachmentUrl}");
					} else {
						//显示数据
						$("#idFrontImage").prop("src", "${secuser.idCardFrontImgUrl}");
						$("#idBackImage").prop("src", "${secuser.idCardBackImgUrl}");
					}
				} else if (auditStatus == 2) {
					var name = "${secuser.RealName}";
					$("#real-name").val(name.substring(0, 1)+"**");
					
					var identity = "${secuser.IdCardNumber}";
					$("#id-number").val(identity.substring(0, 4)+"******"+identity.substring(identity.length-4, identity.length));
					
					//禁用input
					$("#real-name").attr("disabled","disabled");
					$("#id-number").attr("disabled","disabled");
					
					$("#real-name").val(name.substring(0, 1) + "**");
					var identity = "${secuser.idCardNumber}";
					$("#id-number").val(identity.substring(0, 4) + "******" + identity.substring(identity.length - 4, identity.length));
					//显示认证状态
					$("#auditStatus #auth-status").text("审核通过");
					//禁用提交按钮
					$("#submitbtn").attr("class", "layui-btn layui-disabled");
					$("#submitbtn").attr("disabled", "disabled");
					//禁用上传按钮
					$("#idFrontImg-upload").attr("class", "layui-btn layui-btn-primary layui-disabled");
					$("#idFrontImg-upload").attr("disabled", "disabled");
					$("#idBackImg-upload").attr("class", "layui-btn layui-btn-primary layui-disabled");
					$("#idBackImg-upload").attr("disabled", "disabled");
					//禁用上传按钮
					$("#attachmentImg-upload").attr("class", "layui-btn layui-btn-primary layui-disabled");
					$("#attachmentImg-upload").attr("disabled", "disabled");
	
					//判断是认证企业还是个人
					if ("${secuser.attachmentUrl}" != "") {
						//显示数据
						$("#company-name").val("${secuser.corporateName}");
						//禁用input
						$("#company-name").attr("disabled","disabled");
						$("#attachmentImage").prop("src", "${secuser.attachmentUrl}");
					} else {
						//显示数据
						$("#idFrontImage").prop("src", "${secuser.idCardFrontImgUrl}");
						$("#idBackImage").prop("src", "${secuser.idCardBackImgUrl}");
					}
					$("#msg").show();
					$("#msg input[name=msg]").val("${secuser.auditResult}");
					$("#msg input[name=msg]").css("color", "green");
				}
				$("#auditStatus").show();
			}
		});
	</script>
</body>

</html>